<template>
  <PageWrapper>

    <div class="ant-card-head-title">业务</div>
    <div class="card-grid">
      <template v-for="item in items" :key="item">
        <Card>
          <router-link :to="item.link">
            <span class="flex flex-col items-center">
              <Icon :icon="item.icon" :color="item.color" size="20" />
              <span class="text-md mt-2">{{ item.title }}</span>
            </span>
          </router-link>
        </Card>
      </template>
    </div>


    <div class="ant-card-head-title">财务</div>
    <div class="card-grid">
      <template v-for="item in navItems2" :key="item">
        <Card>
          <router-link :to="item.link">
            <span class="flex flex-col items-center">
              <Icon :icon="item.icon" :color="item.color" size="20" />
              <span class="text-md mt-2">{{ item.title }}</span>
            </span>
          </router-link>
        </Card>
      </template>
    </div>

    <div class="ant-card-head-title">商务</div>
    <div class="card-grid">
      <template v-for="item in navItems3" :key="item">
        <Card>
          <router-link :to="item.link">
            <span class="flex flex-col items-center">
              <Icon :icon="item.icon" :color="item.color" size="20" />
              <span class="text-md mt-2">{{ item.title }}</span>
            </span>
          </router-link>
        </Card>
      </template>
    </div>


    <div class="ant-card-head-title">人事</div>
    <div class="card-grid">
      <Card>
        <router-link to="/report/FlowLeaveCompany/view/0">
            <span class="flex flex-col items-center">
              <Icon icon="ion:grid-outline" color="#1fdaca" size="20" />
              <span class="text-md mt-2">离职交接</span>
            </span>
        </router-link>
      </Card>
    </div>

  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Card } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page';
import { Icon } from '/@/components/Icon';
import { navItems, navItems2, navItems3 } from './data';

export default defineComponent({
  components: {
    PageWrapper,
    Card, CardGrid: Card.Grid, Icon
  },
  setup() {
    const loading = ref(true);

    setTimeout(() => {
      loading.value = false;
    }, 1500);

    return {
      loading,
      items: navItems,
      navItems2: navItems2,
      navItems3: navItems3
    };
  },
});

</script>
<style>
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 三列等宽 */
  gap: 0px;
  /* 卡片间距 */
}
</style>